<!--
 * @Author: zhangweinan
 * @Date: 2022-12-27 11:29:26
 * @LastEditors: WeijianXu weijian.xu@unidt.com
 * @LastEditTime: 2024-06-03 14:06:31
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\views\roles\verificationCode\index.vue
-->
<template>
  <div class="container">
    <div class="container-body">
      <template v-if="!successState">

        <img src="/favicon.png" class="sidebar-logo" />
        <h2 style="text-align: center;margin-bottom: 40px;">尊敬的专家您好，请输入您的邀请码！</h2>
        <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
          <!-- 短信验证码登录 -->
          <el-form-item prop="mobileCode">
            <el-input v-model="loginForm.mobileCode" type="text" auto-complete="off"
              placeholder="请输入邀请码">
              <template slot="icon">
                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="loginForm.status" label="1">同意</el-radio>
            <el-radio v-model="loginForm.status" label="-1">拒绝</el-radio>
          </el-form-item>

          <!-- 下方的登录按钮 -->
          <el-form-item style="width: 100%">
            <el-button size="medium" type="primary" style="width: 100%"
              @click.native.prevent="getCode">
              <span>验证</span>
            </el-button>
          </el-form-item>
        </el-form>
      </template>
      <h2 v-else>{{ stateMsg || "感谢您的反馈！" }} </h2>
    </div>
  </div>
</template>
<script>
import { confirmMessageInvitation } from "@/api/enterprise/invitation";
export default {
  data() {
    return {
      loginForm: {
        mobileCode: "",
        status: "1",
      },
      LoginRules: {
        mobileCode: [
          { required: true, trigger: "blur", message: "验证码不能为空" },
        ],
      },
      successState: false,
      stateMsg: "",
    };
  },
  methods: {
    getCode() {
      this.$refs["loginForm"].validate((valid) => {
        if (!valid) return false;
        let param = {
          code: this.loginForm.mobileCode,
          status: this.loginForm.status,
        };
        confirmMessageInvitation(param).then((res) => {
          this.successState = true;
          this.stateMsg = res.msg || "验证成功";
          this.$message.success(this.stateMsg);
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
$containerBgColor: #e6ebf2;
$containerBgImage: "../../../assets/images/bg2.png";

.container {
  width: inherit;
  height: inherit;
  // min-width: 1080px;
  // min-height: 620px;
  background-color: $containerBgColor;
  background-image: url($containerBgImage);
  background-size: cover;


  .container-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: calc(50% - 180px);
  }

  .sidebar-logo {
    width: 56px;
    height: 56px;
    vertical-align: middle;
    margin-bottom: 20px;
  }

  .login-form {
    width: 80%;
    max-width: 400px;
  }
}
</style>
